<template>
  <div class="add-hours-container">
    <div class="show-container">
      <div>
        <div>
          <span>学期</span>
          <span >{{semester}}</span>
        </div>
        <div>
          <span>课程名称</span>
          <span>{{courseName}}</span>
        </div>
        <div style="width: 527px">
          <span>教学班</span>
          <span>{{className}}</span>
        </div>
      </div>
      <div>
        <div>
          <span>课程性质</span>
          <span>{{teachNature}}</span>
        </div>
        <div>
          <span>教学对象</span>
          <span>{{teachObject}}</span>
        </div>
        <div>
          <span>上课人数</span>
          <span>{{studentNumber}}</span>
        </div>
        <div style="width: 348px">
          <span>学时</span>
          <span>{{period}}（理论：{{planTheoryHours}} 实践：{{planPracticalHours}}）</span>
        </div>
         <div class="search-buttonas" @click="operAs" style="width: 87px;height: 28px;margin-top: 10px;border: 1px solid #51aef6;">
          <img src="../../../assets/assessment/icon-search.png" alt="" />
          <span>新增</span>
        </div>
      </div>
      
    </div>
    <div class="table-container">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        class="table-data"
        row-class-name="row-class"
        cell-class-name="cell-class"
        header-row-class-name="header-row-class"
        header-cell-class-name="header-cell-class"
      >
        <el-table-column
          prop="teacherName"
          label="授课教员"
          width="187"
          align="center"
          class-name=""
          label-class-name=""
        >
         <template slot-scope="scope" >
            <dev class="demo-ruleForms">
             <el-input @keyup.enter.native="myFunction(scope.row.teacherName)" v-model="scope.row.teacherName" placeholder="请输入内容"></el-input>
            </dev>
        </template>
        </el-table-column>
        <el-table-column prop="department" label="教研室" width="279" align="center">
          <template slot-scope="scope" >
            <dev class="demo-ruleForms">
             <el-input v-model="scope.row.department" placeholder="请输入内容"></el-input>
            </dev>
        </template>
        </el-table-column>
        <el-table-column prop="rank" label="职称" width="181" align="center">
          <template slot-scope="scope" >
            <dev class="demo-ruleForms">
             <el-input v-model="scope.row.rank" placeholder="请输入内容"></el-input>
            </dev>
        </template>
        </el-table-column>
        <el-table-column
          prop="task"
          label="承担任务"
          width="192"
          align="center"
        >
          <template slot-scope="scope" v-if="scope.row.teacherName">
            <el-select
              v-model="scope.row.task"
              placeholder="请选择"
              class="purple-select"
              popper-class="add-hours-purple-popper"
              size="mini"
              style="width: 98px"
            >
              <el-option
                v-for="item in tasks"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          prop="actual"
          width="166"
          label="实装/实弹"
          align="center"
        >
          <template slot-scope="scope" v-if="scope.row.teacherName">
            <el-select
              v-model="scope.row.actual"
              placeholder="请选择"
              class="green-select"
              popper-class="add-hours-green-popper"
              size="mini"
              style="width: 78px"
            >
              <el-option
                v-for="item in actuals"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          prop="equipment"
          label="装备名称/型号"
          width="196"
          align="center"
        >
          <template slot-scope="scope" v-if="scope.row.teacherName">
            <el-input
              v-model="scope.row.equipment"
              size="mini"
              style="width: 161px"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="jshour" width="117" align="center">
          <template slot-scope="scope" slot="header">
            <div>实际理论</div>
            <div>讲授课时</div>
          </template>
          <template slot-scope="scope" v-if="scope.row.teacherName">
            <el-input
              v-model="scope.row.jshour"
              size="mini"
              style="width: 85px"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="sjhour" width="117" align="center">
          <template slot-scope="scope" slot="header">
            <div>实际实践</div>
            <div>讲授课时</div>
          </template>
          <template slot-scope="scope" v-if="scope.row.teacherName">
            <el-input
              v-model="scope.row.sjhour"
              size="mini"
              style="width: 85px"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="commonts" label="备注" width="190" align="center">
          <template slot-scope="scope" v-if="scope.row.teacherName">
            <el-input
              v-model="scope.row.commonts"
              size="mini"
              style="width: 126px"
              :rows="2.5"
              type="textarea"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="action" label="操作" width="111" align="center">
          <template slot-scope="scope" v-if="scope.row.teacherName" >

            <div class="tools-button" >
              <div v-if="scope.row.dataSource == 'teachingTask'">
                <img src="../../../assets/classHours/icon-add.png" alt="" />
                <span @click="copylist(scope.$index)">复制</span>
              </div>
              <div v-else>
                <img src="../../../assets/classHours/icon-delete.png" alt="" />
                <span @click="delPostList(scope.$index)">删除</span>
              </div>
            </div>

          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="bottom-block">
      <div class="text">授课教员名字后加“*”为课程负责人</div>
    </div>
    <div class="button-group">
      <div class="" @click="JumpHours()">保存</div>
    </div>
  </div>
</template>

<script>
import {queryPostList,delPostList,addPostList,getTeacher} from "../../../api/classHoursAddList/addHours";
export default {
  data() {
    return {
       semester:"2021春",
       courseName:"课程名称",
       className:"教学班",
       teachNature:"课程性质",
       teachObject:"教学对象",
       studentNumber:"实际上课人数",
       planPracticalHours:10,
       planTheoryHours:10,
       nono:"false",
       period:10,
       courseId:'1475282057443717111',
       copyTableData:[],
       tableData: [
        {teacherName:"aaa",department:"aas", rank:"fff", task:"3ee"}
       ],
       tasks: [{ label: "课程主讲", value: "课程主讲" }],
       actuals: [
        { label: "实装", value: "实装" },
        { label: "空弹", value: "空弹" },
        { label: "无", value: "无" },
       ],
    };
  },
  methods: {
    myFunction(vs){
      let obj={
        teacherName : vs
      }
      return new Promise(() => {
      getTeacher(obj).then(res => {
        
      })
      })
    },
     operAs(){
      this.tableData.push({
          teacherName: '',
         department: '',
          rank: '',
        })
    },
    JumpHours() {
      let copyTableData=[];
      for(let i=0; i<this.tableData.length;i++){
        if(i==0){
          copyTableData[0] = this.tableData[0].teacherId;
        }
        if(i>0){
          let arr = this.tableData[i];
          let inelse=0;
          for(let j=0;j<copyTableData.length;j++){
            if( copyTableData[j] == arr.teacherId){
               inelse += 1
              }
          }
          if(inelse == 0){
            let lenga = copyTableData.length;
            copyTableData[lenga] = arr.teacherId
          }
        }
      }
      let flag = true;
      for(let i=0; i<copyTableData.length;i++){
        let arrList=[]
        let arrsa = copyTableData[i];
        for(let j=0;j<this.tableData.length;j++){
          if(this.tableData[j].teacherId == arrsa){
            arrList.push(this.tableData[j]);
          }
        };
        for(let e=0;e<arrList.length;e++){
          let act =arrList[e].actual
            for(let t=e+1; t<arrList.length;t++){
               if(arrList[t].actual == act){
                 flag = false;
               }
            }
        };
      }
      let  flags = false;
      let  planhours = this.period;
      let number =0
      for(let r =0; r<this.tableData.length;r++){
        if(this.tableData[r].jshour != "" && this.tableData[r].sjhour != ""){
          number = number+parseInt(this.tableData[r].jshour) + parseInt(this.tableData[r].sjhour)
        }
      }
      if(number>planhours){
        flags = false;
      }else{
        flags = true
      }
      if(flag && flags){
        return new Promise(() => {
          addPostList(this.tableData).then(res => {
          this.$router.push("/admin/ManagementHours/ClassHourAudit");
          this.queryPostList();
          this.$message({
            showClose: true,
            message: '恭喜你，保存成功',
            type: 'success'
          })
          })
        })
      }else{
        this.$message({
        showClose: true,
        message: '保存失败，请核对装弹/实弹，课时量填写是否正确！',
        type: 'error'
        })
      }
    },
    delPostList: function (b) {
     if(this.tableData[b].id==""){
        this.tableData.splice(b,1)
        this.$message({
          showClose: true,
          message: '恭喜你，删除成功',
          type: 'success'
        })
    }else{
      let obj={
        id:this.tableData[b].id
      }
      return new Promise(() => {
      delPostList(obj).then(res => {
        this.queryPostList();
        this.$message({
          showClose: true,
          message: '恭喜你，删除成功',
          type: 'success'
        })
      })
      })
    }
    },
    queryPostList: function () {
    let obj={
      courseId:this.$route.query.courseId
    }
    return new Promise(() => {
      queryPostList(obj).then(res => {
        this.tableData = res.data.data.courseHourEnterDetailsList;
        this.semester = res.data.data.semester;
        this.courseName = res.data.data.courseName;
        this.className =  res.data.data.className;
        this.teachNature = res.data.data.teachNature;
        this.teachObject =  res.data.data.teachObject;
        this.studentNumber =  res.data.data.studentNumber;
        this.planPracticalHours = res.data.data.planPracticalHours;
        this.planTheoryHours = res.data.data.planTheoryHours;
        this.period =  res.data.data.period;
      })
    })
    },
    copylist:function (a) {
      let number=0;
      for(let i=0;i<this.tableData.length;i++){
        if(this.tableData[i].teacherId == this.tableData[a].teacherId){
           number=number+1;
        }
      }
      if(number<this.actuals.length){
        let copyTest =  deepCopy(this.tableData[a]);
        this.tableData.splice(a,0,copyTest);
        this.tableData[a+1].id="";
        this.tableData[a+1].dataSource="classBreak";
        function deepCopy(source){
        if (typeof source != "object") {
          return source;
        }
        if (source == null) {
          return source;
        }
        var newObj = source.constructor === Array ? [] : {};  //开辟一块新的内存空间
        for (var i in source) {
          newObj[i] = deepCopy(source[i]);
        }
        return newObj;
      }
     }else{
       console.log("不能复制")
     }
    },
    listty: function () {
    for(let i=0; i<=this.tableData.length; i++){
      if(this.tableData[i].actual == ""){
        this.tableData[i].actual=this.actuals[2].label
      }
    }
    }
  },
  mounted() {
    this.queryPostList();
  },
  updated(){
  for(let i=0; i<=this.tableData.length; i++){
      if(this.tableData[i].actual == ""){
        this.tableData[i].actual=this.actuals[0].label
      }
    }
  },
  beforeUpdate(){
    let copyTableData=[];
    for(let i=0; i<this.tableData.length;i++){
      if(i==0){
        copyTableData[0] = this.tableData[0].teacherId;
      }
      if(i>0){
        let arr = this.tableData[i];
        let inelse=0;
        for(let j=0;j<copyTableData.length;j++){
          if( copyTableData[j] == arr.teacherId){
            inelse += 1
          }
        }
        if(inelse == 0){
          let lenga = copyTableData.length;
          copyTableData[lenga] = arr.teacherId
        }
      }
    }
    let arrList=[]
    for(let i=0; i<copyTableData.length;i++){
      let arrs = copyTableData[i];
      for(let j=0; j<this.tableData.length;j++){
        if(this.tableData[j].teacherId == arrs && this.tableData[j].dataSource == "teachingTask"){
            arrList[arrList.length]=this.tableData[j]
        }
      }
      for(let t=0; t<this.tableData.length;t++){
        if(this.tableData[t].teacherId == arrs && this.tableData[t].dataSource != "teachingTask"){
          arrList[arrList.length]=this.tableData[t]
        }
      }
    }
    this.tableData=[];
    this.tableData = arrList;
  }
};
</script>
<style lang="less" scoped>
.add-hours-container {
  .table-container {
    margin-top: 30px;
    .el-table td,
    .el-table th.is-leaf,
    .el-table--border,
    .el-table--group {
      border-color: #c7d7eb;
    }
    .el-table__header tr,
    .el-table__header th {
      padding: 0;
      height: 82px;
      background-color: #edf2f9;
      font-size: 16px;
      font-weight: bold;
      line-height: 20px;
      color: #004ca7;
    }
    .el-table__body tr,
    .el-table__body td {
      padding: 0;
      height: 82px;
    }
    .el-textarea__inner {
      resize: none;
      font-size: 12px;
      box-shadow: inset 0px 0px 9px -1px rgba(0, 76, 167, 0.4);
    }
    .el-input {
      .el-input__inner {
        box-shadow: inset 0px 0px 9px -1px rgba(0, 76, 167, 0.4);
      }
    }
    .el-select {
      .el-input__inner {
        box-shadow: none;
      }
    }
    .table-data {
      width: 100%;
      border: 0.8px solid #004ca7;
      border-radius: 9px;
      font-size: 14px;
      font-weight: 400;
      color: #004ca7;
      .tools-button {
        > div {
          cursor: pointer;
          display: inline-block;
          width: 65px;
          height: 27px;
          background: #f1f8fe;
          border: 1px solid #51aef6;
          opacity: 1;
          border-radius: 6px;
          font-size: 14px;
          font-weight: 400;
          color: #51aef6;
          > img {
            width: 13px;
            height: 13px;
            margin-right: 8px;
            vertical-align: -2px;
          }
          &:nth-child(2) {
            margin-top: 8px;
            background: #ffefef;
            border: 1px solid #fa5339;
            color: #fa5339;
          }
        }
      }
    }

    .green-select {
      .el-input__inner {
        border: 1px solid rgba(2, 200, 108, 1);
        color: rgba(2, 200, 108, 1);
        background: rgba(241, 255, 248, 1);
        .el-icon-arrow-up:before {
          content: "\E6E1";
        }
      }
      .el-select .el-input.is-focus .el-input__inner {
        border-color: rgba(2, 200, 108, 1);
      }
      .el-select:focus .el-input__inner,
      .el-select:hover .el-input__inner {
        border-color: rgba(2, 200, 108, 1);
      }
      .el-input .el-select__caret {
        color: rgba(2, 200, 108, 1);
      }
      .el-select-dropdown__item.selected {
        color: rgba(2, 200, 108, 1);
      }
      .el-input.is-focus .el-input__inner {
        border-color: rgba(2, 200, 108, 1);
      }
    }
    .purple-select {
      .el-input__inner {
        border: 1px solid rgba(82, 48, 233, 1);
        color: rgba(82, 48, 233, 1);
        background: rgba(239, 235, 255, 1);
        .el-icon-arrow-up:before {
          content: "\E6E1";
        }
      }
      .el-select .el-input.is-focus .el-input__inner {
        border-color: rgba(82, 48, 233, 1);
      }
      .el-select:focus .el-input__inner,
      .el-select:hover .el-input__inner {
        border-color: rgba(82, 48, 233, 1);
      }
      .el-input .el-select__caret {
        color: rgba(82, 48, 233, 1);
      }
      .el-select-dropdown__item.selected {
        color: rgba(82, 48, 233, 1);
      }
      .el-input.is-focus .el-input__inner {
        border-color: rgba(82, 48, 233, 1);
      }
    }
  }
}
.add-hours-green-popper {
  .el-select-dropdown__item {
    color: rgba(2, 200, 108, 1);
  }
  .el-select-dropdown__item.selected {
    color: rgba(2, 200, 108, 1);
    font-weight: 700;
  }
}
.add-hours-purple-popper {
  .el-select-dropdown__item {
    color: rgba(82, 48, 233, 1);
  }
  .el-select-dropdown__item.selected {
    color: rgba(82, 48, 233, 1);
    font-weight: 700;
  }
}
</style>

<style lang="less" scoped>
.search-buttonas {
      width: 107px;
      height: 28px;
      line-height: 28px;
      background: #f1f8fe;
      border: 1px solid #51aef6;
      border-radius: 6px;
      margin-left: 10px;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      > span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #51aef6;
      }
      > img {
        width: 20px;
        height: 20px;
        margin-right: 4px;
      }
    }
 .demo-ruleForms /deep/ .el-input__inner {
    outline-color: invert;
    outline-style: none;
    outline-width: 0px;
    border: none;
    border-style: none;
    text-shadow: none;
    -webkit-appearance: none;
    -webkit-user-select: text;
    outline-color: transparent;
    box-shadow: none;
  }
.add-hours-container {
  width: 1738px;
  margin: 0 auto;
  .show-container {
    margin-top: 29px;
    > div {
      display: flex;
      margin-bottom: 30px;
      > div {
        width: 250px;
        border: 1px solid #004ca7;
        opacity: 1;
        border-radius: 5px;
        margin-right: 42px;
        height: 46px;
        > span {
          height: 44px;
          display: inline-block;
          vertical-align: middle;
          line-height: 42px;
          &:nth-child(1) {
            font-size: 18px;
            font-weight: 400;
            color: #004ca7;
            background: RGBA(234, 238, 244, 1);
            width: 100px;
            text-align: center;
            border-radius: 5px;
          }
          &:nth-child(2) {
            padding-left: 22px;
            font-size: 16px;
            color: rgba(93, 179, 246, 1);
          }
        }
      }
    }
  }
  .bottom-block {
    text-align: right;
    .text {
      font-size: 14px;
      font-weight: 400;
      line-height: 39px;
      color: #004ca7;
    }
  }
  .button-group {
    margin-top: 41px;
    text-align: center;
    > div {
      display: inline-block;
      font-size: 18px;
      padding: 6px 22px;
      border-radius: 6px;
      cursor: pointer;
      &:nth-child(1) {
        color: #f3b815;
        border: 1px solid #f3b815;
        background: #fff6ef;
      }
    }
  }
}
</style>







<template>
  <div>
	<el-autocomplete
	style="width: 200px"
    v-model="state"
    :fetch-suggestions="querySearch_front"
    placeholder="请输入内容"
    :trigger-on-focus="false"
    @select="handleSelect">
    <div v-for="(item, index) in nginxServerData" :key="index">
       <el-collapse @change="handleChange(index)">
         <el-collapse-item ref="item" :title="item.name +' ID: '+ item.id">
         </el-collapse-item>
       </el-collapse>
    </div>
    </el-autocomplete>
    <el-button @click="myFunction">点击</el-button>
  </div>
</template>
<script>
import {queryPostList,delPostList,addPostList,getTeacher} from "../../../api/classHoursAddList/addHours";

export default {

	data() {
		return {
      teacherId:"",
      teacherName:"",
			state:'',
			nginxServerData:[]  // 这个requestData只是个占位符要换成自己的数据
		}
	},
	methods: {
    

	    querySearch_front(queryString, cb) {
      let obj={
        teacherName : queryString
      }
      new Promise(() => {
      getTeacher(obj).then(res => {
        this.nginxServerData = res.data.data
        console.log(res.data.data)
        })
      })
	      let restaurants = []
	      // 我后端请求回来的数据是个数组放在了nginxServerData的
	      for (let i = 0; i < this.nginxServerData.length; i++) {
	      // 因为列表框中的数据是必须要用value这个属性的 所以我这里做了处理
	        restaurants.push({'value': this.nginxServerData[i].id+';'+this.nginxServerData[i].name})
	      }
	      let results = queryString ? restaurants.filter(this.createFilter_front(queryString)) : restaurants
	      // 调用 callback 返回建议列表的数据
	      cb(results)
	    },
		createFilter_front(queryString) {
     	   return (restaurant) => {
       		 return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1) 
       		 // 上面这里进行了全局查询所以indexOf条件是 > -1，如果要以开头匹配关键字的话直接把 > -1换成=== 0 就可以了
     		 }
   	 	},
		
		// 点击下拉列表关键字页面滚动到所在位置
		handleSelect(item) {

      this.teacherId = item.value.split(";")[0]
      this.teacherName = item.value.split(";")[1]
		},
		// 比较数组中是否有某字符串
		contains(arr, str) {
	      var i = arr.length
	      while (i--) {
	        if (arr[i] === str) {
	          return true
	        }
	      }
	      return false
	   },
	}
}
</script>
